<template>
	<view class="container">
		<view class="header">
			<text class="page-title">解梦历史</text>
		</view>
		
		<view class="history-list">
			<view class="history-item" v-for="(item, index) in historyList" :key="index" @click="viewDetail(item)">
				<view class="item-header">
					<text class="item-time">{{item.time}}</text>
					<text class="item-tag" :style="{ background: item.tagColor }">{{item.tag}}</text>
				</view>
				<text class="item-content">{{item.content}}</text>
				<view class="item-footer">
					<text class="interpretation-brief">{{item.brief}}</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="historyList.length === 0">
			<image class="empty-icon" src="/static/empty.png" mode="aspectFit"></image>
			<text class="empty-text">还没有解梦记录哦</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			historyList: [
				{
					id: 1,
					time: '2024-03-20 10:30',
					tag: '飞翔',
					content: '在空中自由飞翔',
					brief: '象征追求自由和突破',
					tagColor: '#E3F2FD',
					interpretation: {
						point1: '渴望自由和突破现状的心理暗示',
						point2: '对理想和目标的强烈追求',
						point3: '暗示即将到来的机遇和转机'
					}
				},
				{
					id: 2,
					time: '2024-03-19 15:20',
					tag: '追逐',
					content: '被人追赶',
					brief: '暗示内心的压力和焦虑',
					tagColor: '#FFF3E0',
					interpretation: {
						point1: '当前面临压力或挑战',
						point2: '需要直面内心的恐惧',
						point3: '建议适当调整生活节奏'
					}
				},
				{
					id: 3,
					time: '2024-03-18 20:15',
					tag: '考试',
					content: '参加重要考试',
					brief: '反映对成功的渴望',
					tagColor: '#E8F5E9',
					interpretation: {
						point1: '对自我要求较高',
						point2: '存在被评判的焦虑',
						point3: '需要建立自信心'
					}
				}
			]
		}
	},
	methods: {
		viewDetail(item) {
			// 跳转到解梦结果页，传递完整的梦境内容
			uni.navigateTo({
				url: `/pages/result/result?content=${encodeURIComponent(item.content)}&id=${item.id}`,
				success: () => {
					// 传递解梦数据
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('dreamData', {
						content: item.content,
						interpretation: item.interpretation
					})
				}
			})
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 30rpx;
}

.header {
	margin-bottom: 30rpx;
}

.page-title {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}

.history-list {
	padding: 30rpx;
}

.history-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.item-time {
	font-size: 24rpx;
	color: #999;
}

.item-tag {
	padding: 4rpx 16rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	color: #4080ff;
}

.item-content {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
	margin-bottom: 20rpx;
}

.item-footer {
	border-top: 2rpx solid #f5f5f5;
	padding-top: 20rpx;
}

.interpretation-brief {
	font-size: 26rpx;
	color: #666;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style> 